﻿@namespace MatBlazor
@typeparam TValue
@typeparam TKey
@inherits BaseCoreMatSelect<TValue, TKey>

<CascadingValue Value="@this">

    <div class="@ClassMapper.AsString()" style="@StyleMapper.AsString()" @ref="Ref" id="@Id" @attributes="@Attributes">
        <div class="mdc-select__anchor">

            @if (Outlined)
            {
                <span class="mdc-notched-outline">
                    <span class="mdc-notched-outline__leading"></span>
                    <span class="mdc-notched-outline__notch">
                        @if (Label != null)
                        {
                            <span id="outlined-select-label" class="mdc-floating-label">@Label</span>
                        }
                    </span>
                    <span class="mdc-notched-outline__trailing"></span>
                </span>
            }
            else
            {
                <span class="mdc-select__ripple"></span>

                @if (Label != null)
                {
                    <span class="mdc-floating-label">@Label</span>
                }
            }


            <span class="mdc-select__selected-text @FieldClass"></span>

            @if (!HideDropDownIcon)
            {
                <span class="mdc-select__dropdown-icon">
                    <svg
                        class="mdc-select__dropdown-icon-graphic"
                        viewBox="7 10 10 5">
                        <polygon
                            class="mdc-select__dropdown-icon-inactive"
                            stroke="none"
                            fill-rule="evenodd"
                            points="7 10 12 15 17 10">
                        </polygon>
                        <polygon
                            class="mdc-select__dropdown-icon-active"
                            stroke="none"
                            fill-rule="evenodd"
                            points="7 15 12 10 17 15">
                        </polygon>
                    </svg>
                </span>
            }

            @if (!Outlined)
            {
                <span class="mdc-line-ripple"></span>
            }

            @if (Icon != null)
            {
                <i class="material-icons mdc-select__icon" tabindex="@(IconOnClick.HasDelegate ? "0" : null)" onclick="@IconOnClick">@Icon</i>
            }
        </div>

        <div class="mdc-select__menu mdc-menu mdc-menu-surface" style="@(FullWidth ? "width: 100%;" : "")">
            <ul class="mdc-list">
                @GetChildContent()
            </ul>
        </div>


    </div>
    @if (HelperText != null)
    {
        <p class="@HelperTextClassMapper.AsString()" aria-hidden="true">@HelperText</p>
    }
</CascadingValue>